@extends('layouts.default')

@section('title', '数据定义项管理')

@push('scripts')
<script>
    var totalNUm = 0;
    var table;
    var form;
    var laypage;
    var layer;
    var slider;
    var filters = {};
    var addLayer;
    var editLayer;
    var id = '';
    var sortnum;
    var diccode;
    var per_page = 10;

    $(function(){
        diccode = window.parent.$(".diccode").val();

        layui.use(['table', 'form', 'element', 'laypage', 'slider'], function() {
            table = layui.table;
            element = layui.element;
            form = layui.form;
            laypage = layui.laypage;
            layer = layui.layer;
            slider = layui.slider

            getList(1,per_page);

            // 搜索
            form.on('submit(search)', function(data) {
                filters = Object.assign({}, data.field);
                getList(1,per_page);
                renderPageBar(1);
                return false;
            });

            // 新增提交
            form.on('submit(addSubmit)', function(data) {
                var data = data.field;
                var para = {
                    "diccode": diccode,
                    "itemcode": data.itemcode,
                    "itemname": data.itemname,
                    "sortnum": sortnum
                }
                addDicItem(para, function(res) {
                    if(res.code == 1) {
                        layer.close(addLayer);
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        getList(1);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                });
                return false;
            });

            // 编辑提交
            form.on('submit(editSubmit)', function(data) {
                var flag = true;
                var data = data.field;
                var para = {
                    "id": id,
                    "diccode": diccode,
                    "itemcode": data.itemcode,
                    "itemname": data.itemname,
                    "sortnum": sortnum
                }
                editDicItem(para, function(res) {
                    if(res.code == 1) {
                        layer.close(editLayer);
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        getList(1);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                });

                return false;
            });

            // 点击新增按钮
            $('#addBtn').on('click', function() {
                layer.ready(function() {
                    var index = layer.load(2);
                    addLayer = layer.open({
                        type: 1,
                        title: '新增',
                        content: $('#addDialoge'),
                        area: ['500px', '400px'],
                        cancel: function() {
                            //右上角关闭回调
                            $('#addForm')[0].reset()
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    layer.close(index);
                });
                form.val('addForm', {
                    "itemcode": "",
                    "itemname": "",
                    "sortnum": 50
                });
                //在这里要重新渲染不然和编辑的冲突拖拽不了
                var renderSlider = slider.render({
                    elem: '.addslide',
                    input: true, //输入框
                    max: 100, //最大值
                    change: function(value) {
                        sortnum = value;
                    }
                });
                renderSlider.setValue(50);
            });

            table.on('tool(itemlist)', function(obj) {
                var data = obj.data;
                id = data.id;
                if(obj.event === 'del') { //删除
                    layer.confirm('确认删除该定义项吗', function(index) {
                        var para = {
                            "id": id
                        }
                        delDicItem(para, function(res) {
                            if(res.code === 1) {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 6
                                });
                                getList(1);
                            } else {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 5
                                });
                            }
                        });
                        layer.close(index);
                    });
                } else if(obj.event === 'edit') { //编辑
                    layer.ready(function() {
                        var index = layer.load(2);
                        editLayer = layer.open({
                            type: 1,
                            title: "编辑",
                            content: $('#editDialoge'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                            area: ['485px', '400px'],
                            cancel: function() {
                                //右上角关闭回调
                                $('#editForm')[0].reset()
                                //return false 开启该代码可禁止点击该按钮关闭
                            }
                        });
                        layer.close(index);
                    });
                    //获取编辑的值
                    form.val('editForm', {
                        "itemcode": data.itemcode,
                        "itemname": data.itemname,
                        "sortnum": data.sortnum
                    });
                    var renderSlider = slider.render({
                        elem: '.editslide',
                        input: true, //输入框
                        max: 100, //最大值
                        change: function(value) {
                            sortnum = value;
                        }
                    });
                    renderSlider.setValue(data.sortnum);
                }
            });
        });
    });

    // 获取页面数据
    function getList(page,limit) {
        showloading(true);
        var para = {
            "diccode": diccode,
            "page": page,
            "filters": filters,
            "limit": limit
        };
        getDicItemList(para, function(res){
            showloading(false);
            if(res.code === 1) {
                if(totalNUm != res.total) {
                    totalNUm = res.total;
                    per_page = res.limit;
                    renderPageBar(page)
                }

                table.render({
                    data: res.data,
                    elem: '#itemlist',
                    limit: res.limit,
                    even: true,
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'id', title: '序号', hide: true}, 
                        {field: 'itemcode', title: '编码', width: '20%', align:'center'}, 
                        {field: 'itemname', title: '名称', width: '25%', align:'center'}, 
                        {field: 'sortnum', title: '排序', width: '10%', align:'center'}, 
                        {title: '操作', align:'center', toolbar: '#barDemo'}
                    ]],
                    done: function(res, curr, count) {

                    },
                    page: false,
                    loading: true
                });
            } else {
                layer.msg(res.msg, {
                    time: 2000,
                    icon: 5
                });
            }
        });
    }

    // 渲染页面
    function renderPageBar(page,limit) {
        laypage.render({
            elem: 'pageBar',
            count: totalNUm, //数据总数，从服务端得到
            curr: page,
            first: '第一页',
            last: '最后一页',
            limit:limit,
            layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
            jump: function(obj, first) {
                //首次不执行
                if(!first) {
                    layer.closeAll();
                    getList(obj.curr,obj.limit)
                }
            }
        });
    }

</script>
@endpush

@section('content')
<style>
    .layui-form{padding: 10px;}
    .pop-form .layui-form-item{width: 80%;}
    .pop-form .layui-form-item .layui-form-label{width: 30%;}
    .laytable-cell-1-0-5{width: 263px!important;}
</style>
<!-- 搜索添加 -->
<div class="layui-body">
    <form class="layui-form" action="">
        <div class="layui-input-inline" style="padding-left: 10px">
            <input class="layui-input" name="itemcode" id="itemcode" autocomplete="off" placeholder="条目编码">
        </div>
        <div class="layui-input-inline" style="width: 220px;">
            <input type="text" name="itemname" value="" placeholder="条目名称" class="layui-input">
        </div>

        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="search">查询</button>
        </div>

        <div class="layui-input-inline" style="float:right;padding-right: 20px">
            <button id="addBtn" type="button" data-method="offset" data-type="auto" class="layui-btn layui-btn-add">新增</button>
        </div>
    </form>
    <!-- 内容主体区域 -->
    <div class="show-area">
        <table class="layui-hide" id="itemlist" lay-filter="itemlist" lay-data="{id: 'itemlist'}"></table>
        <div class="pagebarbox"><div id="pageBar" class="pagebar"></div></div>

        <script type="text/html" id="barDemo">
            <a class="tableop" lay-event="edit">编辑</a>
            <a class="tableop" lay-event="del">删除</a>
        </script>
    </div>
</div>


<!--新增弹窗-->
<div id="addDialoge" class="dialogue" style="display: none;padding: 20px">
    <form class="layui-form pop-form" action="" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>定义项编码</label>
            <div class="layui-input-inline">
                <input type="text" name="itemcode" required lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>定义项名称</label>
            <div class="layui-input-inline">
                <input type="text" name="itemname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>排序</label>
            <div class="layui-input-inline" style="margin-top: 15px;">
                <div class="addslide demo-slider" name="sortnum"></div>
            </div>
        </div>
        <div style="text-align: center; clear: both;">
            <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="addSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
        </div>
    </form>
</div>

<!--编辑弹窗-->
<div id="editDialoge" class="dialogue" style="display: none;padding: 20px">
    <form class="layui-form pop-form" action="" id="editForm" lay-filter="editForm">
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>定义项编码</label>
            <div class="layui-input-inline">
                <input type="text" name="itemcode" required lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>定义项名称</label>
            <div class="layui-input-inline">
                <input type="text" name="itemname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="redstar">*</i>排序</label>
            <div class="layui-input-inline" style="margin-top: 15px;">
                <div class="editslide demo-slider" name="sortnum"></div>
            </div>
        </div>
        <div style="text-align: center; clear: both;">
            <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="editSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
        </div>
    </form>
</div>
@endsection
